<template>
    <div class="content-banner">
        <el-card :class="['content-banner-card',bannerImages[type-1]]">
            <section :class="['skm-banner-poetry',`skm-banner-poetry-${type}`]">
                <div class="skm-banner-poetry-title">
                    <span>{{ content.title }}</span>
                </div>
                <div class="skm-banner-poetry-author">
                    <span>{{ content.author }}</span>
                </div>
                <div class="skm-banner-poetry-content">
                    <span v-for="sp in content.poetryList">{{ sp }}</span>
                </div>
            </section>
        </el-card>
    </div>
</template>

<script>
import banner from "@/assets/images/card01.jpg"

export default {
    name: "PoetryBannerComponent",
    props: {
        item: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
    data() {
        return {
            background: banner,
            content: {},
            bannerImages: [
                "content-banner-card01",
                "content-banner-card02",
                "content-banner-card03",
                "content-banner-card04",
                "content-banner-card05"
            ],
            type: 1
        }
    },
    mounted() {
        this.content = this.item;
        this.type = Math.floor(Math.random() * 5) + 1;
        this.type = new Date().getDate() % 5;
    },
    methods: {}
}
</script>

<style scoped lang="scss">
.content-banner {
    width: 800px;
    margin: 0 auto;

    .content-banner-card {
        padding: 0;
        height: 450px;
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .content-banner-card01 {
        background-image: url("@/assets/images/card01.jpg");
    }

    .content-banner-card02 {
        background-image: url("@/assets/images/card02.jpg");
    }

    .content-banner-card03 {
        background-image: url("@/assets/images/card03.jpg");
    }

    .content-banner-card04 {
        background-image: url("@/assets/images/card04.jpg");
    }

    .content-banner-card05 {
        background-image: url("@/assets/images/card05.jpg");
    }

}
</style>
